<template>
	<div @click="show = false">
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="code m1280 f f-a-c f-j-b">
			<span>{{ listObj.name }}</span>
			<div class="imgBox hand f f-a-c f-j-c">
				<img @click.stop="show = !show" src="/src/assets/geng.png" alt="" />
				<div v-show="show" class="rename">
					<div @click.stop="listVisible = true" class="topName">Rename</div>
					<div @click.stop="del({}, 1)" class="delete">Delete</div>
				</div>
			</div>
		</div>
		<!-- 头像 -->
		<div class="avart f f-a-c m1280">
			<img :src="obj.avatar" class="imgTou" alt="" />
			<div class="box">
				<div class="gavin">{{ obj.firstName }} {{ obj.lastName }}</div>
				<div class="time">{{ formatTimestamp(obj.lastLogin) }} {{ listObj.count }} problems</div>
			</div>
		</div>
		<!-- 人物列表 -->
		<div class="listPeople m1280 f f-w-w">
			<div v-for="(item, index) in listObj.favoriteListData" :key="index" class="item">
				<div class="topImg f f-a-c">
					<img :src="item.sellerAvatar" alt="" />
					<div class="tocsd">
						<div class="nickName">{{ item.sellerFirstName }}{{ item.sellerLastName }}</div>
						<div class="description o-f-1">{{ item.targetedProblem }}</div>
						<div class="tabs f f-a-c">
							<div class="tabsItem" v-for="(ite, ind) in item.topicNames">{{ ite }}</div>
							<!-- <div class="tabsItem">Salary negotiation</div> -->
						</div>
					</div>
				</div>
				<div class="xiaBox f f-a-c f-j-b">
					<div @click="del(item, 2)" class="lefDet hand">Delete</div>
					<div @click="goUserinfo(item)" class="rigDet hand f f-a-c">View <img src="/src/assets/user/back2.png" class="imgBack" alt="" /></div>
				</div>
			</div>
		</div>
		<div style="width: 100%; height: 80px"></div>
		<!-- 添加 -->
		<el-dialog v-model="listVisible" title="" width="540">
			<div class="dialogTitle">Rename list</div>
			<div class="nameDia">List name</div>
			<input type="text" v-model="listValue" class="dialogInp" name="" id="" />
			<div class="diolBtn f f-a-c">
				<div @click="xiugai" class="add">Save</div>
			</div>
		</el-dialog>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="540">
			<div class="dialogTitleDelete">Delete this list？</div>
			<div class="dialogTitCount">The deleted content cannot be recovered</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @click="listVisibleDet = false" class="lefBtn hand">Cancel</div>
				<div @click="delelTow" class="rigBtn hand">Delete</div>
			</div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { SellerUserDetails, BuyerUserDetils, GigsGroupList, QuFavoriteGigs, EditFavoriteGroup, DetleFavoriteGroup } from "@/api/xpert.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { useRoute } from "vue-router";
	import { ElMessage } from "element-plus";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { formatTimestamp, timeHous, copy } from "@/utils/setting.js";

	import router from "@/router/index.js";
	let ind = localStorage.getItem("ind");
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let show = ref(false);
	let route = useRoute();
	let id = route.query.id;
	let listValue = ref("Business");
	let listVisible = ref(false);
	let num = ref(1);
	let listObj = ref({});
	let listVisibleDet = ref(false);
	let obj = ref({});
	let delObj = ref({});
	onMounted(() => {
		userinfo();
		initList();
		window.addEventListener("scroll", handleScroll);
	});
	const goUserinfo = item => {
		router.push({
			path: "/PersonalHome",
			query: {
				userId: item.userId
			}
		});
	};
	//点击修改
	const xiugai = async () => {
		let n = await EditFavoriteGroup({
			id: id,
			name: listValue.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			initList();
			listVisible.value = false;
		}
	};
	// 点击确认删除
	const delelTow = async () => {
		if (num.value == 1) {
			// 删除数组列表数据
			let n = await DetleFavoriteGroup({ id: id });
			if (n.code == 200) {
				ElMessage.success(n.msg);
				setTimeout(() => {
					router.go(-1);
				}, 1000);
				listVisibleDet.value = false;
			}
		} else {
			// 删除数组数据
			let n = await QuFavoriteGigs({ gigsId: listObj.value.id });
			if (n.code == 200) {
				ElMessage.success(n.msg);
				initList();
				listVisibleDet.value = false;
			}
		}
	};
	// 点击删除
	const del = (item, nums) => {
		console.log(item, "11111111111111");
		num.value = nums;
		delObj.value = item;
		listVisibleDet.value = true;
	};
	const initList = async () => {
		let n = await GigsGroupList({ id: id });
		listObj.value = n.data;
		listValue.value = n.data.name;
	};
	const userinfo = async () => {
		let n = null;
		if (ind == 2) {
			// 表示卖家
			n = await SellerUserDetails();
		} else {
			// 表示买家
			n = await BuyerUserDetils();
		}
		obj.value = n.data;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
